<template>
	<div id="srcoll-1">
		<div id="srcoll-2"><slot name="content"></slot></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				top1:'',
				top2:'',
				top3:'',
				top4:'2000'
			}
		},
		methods: {
			menu : function(){
				this.scroll = document.getElementById('srcoll-1').scrollTop;
				var awayBtm = $("#srcoll-2").height() - $("#srcoll-1").scrollTop() - $("#srcoll-1").height();
				this.$emit('event',awayBtm,this.scroll);
//				console.log(this.crowd)
//			    if(awayBtm <= 20) {
//					this.$emit('event');
//			    }
			},
			setScrollTop : function(type){
				window.setScrollTop({[type]:this.scroll});
			},
			getScrollTop : function(type){
				var scrollTop = window.getScrollTop(type);
        		document.getElementById('srcoll-1').scrollTop = scrollTop;
			}
		},
		mounted() {
			document.getElementById('srcoll-1').removeEventListener('scroll', this.menu);
			document.getElementById('srcoll-1').addEventListener('scroll', this.menu);
    	}
	}
</script>
<style>
</style>